<!-- eslint-disable no-useless-escape -->
<template>
  <div class="ai-chat-page">
    <div class="chat-header">
      <el-button class="back-button" icon="ArrowLeft" @click="goBack">返回</el-button>
      <h1>AI聊天助手</h1>
    </div>
    
    <div class="privacy-alert">
      <i class="alert-icon">⚠️</i>
      <div class="alert-content">
        <strong>隐私提示：</strong>与AI的对话仅临时存储在内存中，不会永久保存到数据库。本应用使用百炼平台的deepseek大模型，请注意保护您的隐私信息。清除对话后，历史记录将无法恢复。用户与ai的聊天数据会在最后一次聊天的30分钟后清除，请你及时保存相关信息。

      </div>
    </div>
    
    <div class="controls">
      <el-button 
        id="clear-button" 
        @click="clearHistory" 
        class="clear-button" 
        type="danger" 
        :disabled="isProcessing"
      >清除历史</el-button>
    </div>
    
    <div class="chat-container" ref="chatContainer">
      <div v-for="(msg, index) in chatHistory" :key="index">
        <!-- 用户消息 -->
        <div v-if="msg && msg.role && msg.role.toUpperCase() === 'USER'" class="message user-message">
          {{ msg.content }}
        </div>
        
        <!-- AI消息组 -->
        <div v-else-if="msg && msg.role && msg.role.toUpperCase() === 'ASSISTANT'" class="message-group">
          <!-- 如果有推理内容，显示推理消息 -->
          <div v-if="msg.reasoningContent" class="message reasoning-message">
            {{ msg.reasoningContent }}
          </div>
          
          <!-- AI回复内容 -->
          <div class="message assistant-message">
            <div v-html="formatMessage(msg.content)"></div>
            <button class="copy-button" @click="copyToClipboard(msg.content)">复制</button>
          </div>
        </div>
        
        <!-- 系统消息或其他类型的消息 -->
        <div v-else-if="msg && msg.role && msg.role.toUpperCase() === 'SYSTEM'" class="message-group">
          <!-- 系统消息内容 -->
          <div class="message system-message">
            系统提示: {{ msg.content }}
          </div>
        </div>
      </div>
      
      <!-- 正在生成的消息容器 -->
      <div v-if="showInProgressGroup" class="message-group">
        <!-- 推理内容 -->
        <div v-if="inProgressReasoning" class="message reasoning-message">
          {{ inProgressReasoning }}
        </div>
        
        <!-- 正在生成的回复内容 -->
        <div v-if="inProgressResponse" class="message assistant-message">
          <div v-html="formatMessage(inProgressResponse)"></div>
          <button class="copy-button" @click="copyToClipboard(inProgressResponse)">复制</button>
        </div>
      </div>
    </div>
    
    <div v-if="isProcessing" class="typing-indicator">AI思考中...</div>
    
    <div class="input-area">
      <el-input
        v-model="messageText"
        placeholder="输入您的消息..."
        @keyup.enter="sendMessage"
        :disabled="isProcessing"
      />
      <el-button type="primary" @click="sendMessage" :disabled="isProcessing">
        发送
      </el-button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, nextTick, watch, onUnmounted } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

export default {
  name: 'AiChatPage',
  setup() {
    const router = useRouter()
    
    // 状态变量
    const isProcessing = ref(false)
    const chatHistory = ref([])
    const messageText = ref('')
    const chatContainer = ref(null)
    
    // EventSource 实例引用
    const eventSource = ref(null)
    
    // 处理中的消息
    const inProgressReasoning = ref('')
    const inProgressResponse = ref('')
    const showInProgressGroup = ref(false)
    
    // 检测是否在开发环境
    const isDev = ref(process.env.NODE_ENV === 'development')
    
    // 关闭 EventSource 连接
    const closeEventSource = () => {
      if (eventSource.value) {
        eventSource.value.close()
        eventSource.value = null
      }
    }
    
    // 返回按钮处理函数
    const goBack = () => {
      closeEventSource()
      router.push('/home')
    }
    
    // 页面卸载时的清理
    onUnmounted(() => {
      closeEventSource()
    })
    
    // 监听页面刷新
    window.addEventListener('beforeunload', () => {
      closeEventSource()
    })
    
    // 获取认证Token
    const getToken = () => {
      return localStorage.getItem('token') || ''
    }
    
    // 创建带认证的请求头
    const createAuthHeaders = () => {
      const token = getToken()
      return {
        'Authorization': `${token}`,
        'Content-Type': 'application/json'
      }
    }
    
    // 初始化系统消息
    const initializeSystemMessage = async () => {
      try {
        const response = await fetch('/api/ai/history', {
          headers: createAuthHeaders()
        })
        const result = await response.json()
        
        // 确保响应成功并且有数据
        if (result.code !== 1 || !result.data) {
          console.error('获取历史记录失败:', result.msg || '未知错误')
          return
        }
        
        const history = result.data
        
        // 检查历史记录中是否已有系统消息，适应角色名称大小写
        const hasSystemMessage = Array.isArray(history) && history.some(msg => msg && msg.role && msg.role.toUpperCase() === 'SYSTEM')
        
        if (!hasSystemMessage) {
          console.log('未检测到系统消息，正在初始化...')
          // 如果没有系统消息，初始化默认系统消息
          const initResponse = await fetch('/api/ai/init-system', {
            method: 'POST',
            headers: createAuthHeaders()
          })
          const initResult = await initResponse.json()
          
          if (initResult.code === 1 && initResult.data && initResult.data.success) {
            console.log('系统消息初始化成功')
            // 重新加载聊天历史以显示系统消息
            await loadChatHistory()
          } else {
            console.error('初始化系统消息失败:', initResult.msg || '未知错误')
          }
        }
      } catch (error) {
        console.error('检查系统消息失败:', error)
      }
    }
    
    // 加载聊天历史
    const loadChatHistory = async () => {
      try {
        const response = await fetch('/api/ai/history', {
          headers: createAuthHeaders()
        })
        const result = await response.json()
        
        // 确保响应成功并且有数据
        if (result.code !== 1) {
          console.error('加载历史记录失败:', result.msg || '未知错误')
          ElMessage.error('加载历史消息失败')
          return
        }
        
        const history = result.data
        
        // 过滤掉无效的消息
        chatHistory.value = Array.isArray(history) 
          ? history.filter(msg => msg && msg.role) 
          : []
        
        console.log('加载历史记录:', chatHistory.value)
        
        // 滚动到底部
        await nextTick()
        scrollToBottom()
      } catch (error) {
        console.error('加载历史消息失败:', error)
        ElMessage.error('加载历史消息失败')
      }
    }
    
    // 发送消息
    const sendMessage = async () => {
      const message = messageText.value.trim()
      if (!message || isProcessing.value) return
      
      // 禁用输入
      isProcessing.value = true
      
      // 保存输入文本
      const inputText = messageText.value
      messageText.value = ''
      
      // 添加用户消息到历史记录
      chatHistory.value.push({
        role: 'USER',
        content: inputText
      })
      
      await nextTick()
      scrollToBottom()
      
      // 准备接收AI响应
      inProgressReasoning.value = ''
      inProgressResponse.value = ''
      showInProgressGroup.value = true
      
      try {
        console.log('开始请求流式响应')
        
        // 获取token (在URL中使用)
        const token = getToken()
        
        // 创建EventSource实例 (token在URL中)
        const url = `http://10.26.12.190:8092/ai/stream?content=${encodeURIComponent(inputText)}&token=${token}`
        eventSource.value = new EventSource(url)
        
        console.log('EventSource创建成功')
        
        // 监听推理过程事件
        eventSource.value.addEventListener('reasoning', (event) => {
          console.log('收到reasoning事件:', event.data)
          // 直接追加新收到的内容，去除所有形式的换行符
          const cleanedText = event.data
            .replace(/\\n/g, '') // 去除字面的\n
            .replace(/\n/g, '')  // 去除实际的换行符
          inProgressReasoning.value += cleanedText
          // 立即更新UI
          nextTick(() => scrollToBottom())
        })
        
        // 监听内容事件
        eventSource.value.addEventListener('content', (event) => {
          console.log('收到content事件:', event.data)
          // 直接追加新收到的内容，去除所有形式的换行符
          const cleanedText = event.data
            .replace(/\\n/g, '') // 去除字面的\n
            .replace(/\n/g, '')  // 去除实际的换行符
          inProgressResponse.value += cleanedText
          // 立即更新UI
          nextTick(() => scrollToBottom())
        })
        
        // 监听完成事件
        eventSource.value.addEventListener('complete', (event) => {
          console.log('收到complete事件')
          closeEventSource()
          finalizeResponse()
        })
        
        // 错误处理
        eventSource.value.onerror = (error) => {
          console.error('EventSource错误:', error)
          closeEventSource()
          
          if (inProgressResponse.value) {
            finalizeResponse()
          } else {
            ElMessage.error('连接中断，请重试')
            isProcessing.value = false
            showInProgressGroup.value = false
          }
        }
      } catch (error) {
        console.error('发送消息失败:', error)
        isProcessing.value = false
        ElMessage.error('发送消息失败')
        showInProgressGroup.value = false
      }
    }
    
    // 完成响应处理的辅助函数
    const finalizeResponse = () => {
      // 将生成的消息添加到历史记录
      if (inProgressResponse.value) {
        chatHistory.value.push({
          role: 'ASSISTANT',
          content: inProgressResponse.value,
          reasoningContent: inProgressReasoning.value
        })
      }
      
      // 清空进行中的消息
      inProgressReasoning.value = ''
      inProgressResponse.value = ''
      showInProgressGroup.value = false
      
      // 重新启用输入
      isProcessing.value = false
      
      nextTick(() => scrollToBottom())
    }
    
    // 格式化消息(简单的Markdown支持)
    const formatMessage = (text) => {
      if (!text) return ''
      
      // 首先处理可能存在的原始HTML标签，进行转义
      let formattedText = text.replace(/&/g, '&amp;')
         .replace(/</g, '&lt;')
         .replace(/>/g, '&gt;')
         .replace(/"/g, '&quot;')
         .replace(/'/g, '&#039;')
      
      // 处理标题
      formattedText = formattedText.replace(/^### (.*?)$/gm, '<h3>$1</h3>')
      formattedText = formattedText.replace(/^## (.*?)$/gm, '<h2>$1</h2>')
      formattedText = formattedText.replace(/^# (.*?)$/gm, '<h1>$1</h1>')
      
      // 处理粗体和斜体
      formattedText = formattedText.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
      formattedText = formattedText.replace(/\*(.*?)\*/g, '<em>$1</em>')
      
      // 处理列表
      formattedText = formattedText.replace(/^\- (.*?)$/gm, '<li>$1</li>').replace(/<li>(.*?)<\/li>(?!\n<li>)/gs, '<ul><li>$1</li></ul>')
      formattedText = formattedText.replace(/^\d+\. (.*?)$/gm, '<li>$1</li>').replace(/<li>(.*?)<\/li>(?!\n<li>)/gs, '<ol><li>$1</li></ol>')
      
      // 处理代码块
      formattedText = formattedText.replace(/```(.*?)```/gs, '<pre><code>$1</code></pre>')
      
      // 处理行内代码
      formattedText = formattedText.replace(/`(.*?)`/g, '<code>$1</code>')
      
      // 处理引用
      formattedText = formattedText.replace(/^> (.*?)$/gm, '<blockquote>$1</blockquote>')
      
      // 处理段落和换行
      formattedText = formattedText.split('\n').map(line => line.trim()).join('\n')  // 清理每行前后的空白
      formattedText = formattedText.replace(/\n{2,}/g, '</p><p>')  // 多个换行转换为段落
      formattedText = formattedText.replace(/\n/g, '<br>')  // 单个换行转换为<br>
      
      return '<p>' + formattedText + '</p>'
    }
    
    // 复制文本功能
    const copyToClipboard = async (text) => {
      try {
        await navigator.clipboard.writeText(text)
        ElMessage.success('复制成功')
      } catch (err) {
        console.error('复制失败:', err)
        ElMessage.error('复制失败')
      }
    }
    
    // 清除历史记录
    const clearHistory = async () => {
      if (isProcessing.value) {
        ElMessage.warning('AI正在回复，请等待完成后再清除历史')
        return
      }
      
      try {
        await ElMessageBox.confirm('确定要清除所有聊天记录吗？此操作不可恢复。', '确认清除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        const response = await fetch('/api/ai/history', {
          method: 'DELETE',
          headers: createAuthHeaders()
        })
        const result = await response.json()
        
        if (result.code === 1 && result.data && result.data.success) {
          chatHistory.value = []
          ElMessage.success('聊天历史已清除')
          // 重新初始化系统消息
          await initializeSystemMessage()
        } else {
          ElMessage.error(result.data?.message || result.msg || '清除历史失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('清除历史失败:', error)
          ElMessage.error('清除历史失败')
        }
      }
    }
    
    // 滚动到底部
    const scrollToBottom = () => {
      if (chatContainer.value) {
        chatContainer.value.scrollTop = chatContainer.value.scrollHeight
      }
    }
    
    // 页面加载时初始化
    onMounted(async () => {
      // 加载聊天历史
      await loadChatHistory()
      
      // 初始化系统消息
      await initializeSystemMessage()
    })
    
    // 监听聊天历史变化，自动滚动到底部
    watch(chatHistory, () => {
      nextTick(() => scrollToBottom())
    })
    
    // 监听处理中的消息变化，自动滚动到底部
    watch([inProgressReasoning, inProgressResponse], () => {
      nextTick(() => scrollToBottom())
    })
    
    return {
      ArrowLeft,
      isProcessing,
      chatHistory,
      messageText,
      chatContainer,
      inProgressReasoning,
      inProgressResponse,
      showInProgressGroup,
      sendMessage,
      formatMessage,
      clearHistory,
      goBack,
      isDev,
      getToken,
      copyToClipboard
    }
  }
}
</script>

<style scoped>
.ai-chat-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

.chat-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.back-button {
  margin-right: 15px;
}

h1 {
  margin: 0;
  color: #303133;
}

.privacy-alert {
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 5px;
  padding: 10px 15px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  color: #856404;
}

.alert-icon {
  font-size: 20px;
  margin-right: 10px;
}

.alert-content {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}

.controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
  gap: 10px;
}

.clear-button {
  margin-left: auto;
}

.chat-container {
  flex: 1;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  padding: 15px;
  overflow-y: auto;
  margin-bottom: 15px;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center; /* 使内容水平居中 */
}

/* 让用户消息靠右，AI消息靠左 */
.chat-container > div {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.message {
  margin-bottom: 10px;
  padding: 8px 15px;
  border-radius: 18px;
  max-width: 75%; /* 限制消息最大宽度为容器的75% */
  word-wrap: break-word;
  line-height: 1.5;
  font-size: 15px;
}

.user-message {
  background-color: #dcf8c6;
  margin-left: auto; /* 靠右显示 */
  text-align: right;
  align-self: flex-end; /* 确保靠右 */
}

.message-group {
  margin-bottom: 20px;
  max-width: 75%; /* 限制消息组最大宽度 */
  align-self: flex-start; /* 靠左显示 */
}

.reasoning-message {
  background-color: #f1f1f1;
  margin-right: auto;
  font-style: italic;
  color: #666;
  padding: 10px;
  border-radius: 8px;
  border-left: 3px solid #999;
  margin-bottom: 10px;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  display: block;
  max-width: 100%; /* 相对于消息组的宽度 */
}

.assistant-message {
  background-color: #e6f7ff;
  color: #000000;
  margin-right: auto;
  position: relative;
  max-width: 100%; /* 相对于消息组的宽度 */
}

.typing-indicator {
  color: #999;
  font-style: italic;
  margin-bottom: 10px;
}

.input-area {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 600px; /* 进一步限制整体宽度 */
  margin: 0 auto; /* 居中显示 */
  width: 80%; /* 占据父容器的80%宽度 */
}

.input-area .el-input {
  flex: 3; /* 输入框占据3份空间 */
}

.input-area .el-button {
  flex: 1; /* 按钮占据1份空间 */
  min-width: 100px; /* 最小宽度 */
  height: 40px; /* 与输入框高度保持一致 */
}

/* Markdown 格式样式 */
:deep(.assistant-message h1),
:deep(.assistant-message h2),
:deep(.assistant-message h3) {
  margin-top: 10px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

:deep(.assistant-message h1) {
  font-size: 1.5em;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

:deep(.assistant-message h2) {
  font-size: 1.3em;
}

:deep(.assistant-message h3) {
  font-size: 1.1em;
}

:deep(.assistant-message ul),
:deep(.assistant-message ol) {
  margin-left: 20px;
  margin-bottom: 10px;
}

:deep(.assistant-message li) {
  margin-bottom: 5px;
}

:deep(.assistant-message p) {
  margin-bottom: 10px;
}

:deep(.assistant-message code) {
  background-color: #f4f4f4;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
}

:deep(.assistant-message pre) {
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
  margin: 10px 0;
}

:deep(.assistant-message strong) {
  font-weight: bold;
}

:deep(.assistant-message em) {
  font-style: italic;
}

:deep(.assistant-message blockquote) {
  border-left: 3px solid #ccc;
  padding-left: 10px;
  color: #666;
  margin: 10px 0;
}

/* 系统消息样式 */
.system-message {
  background-color: #f5f5f5;
  color: #666;
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid #4CAF50;
  font-style: italic;
  font-size: 14px;
  max-width: 100%;
  margin-bottom: 15px;
}

.copy-button {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #f1f1f1;
  border: none;
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.assistant-message:hover .copy-button {
  opacity: 1;
}

.copy-button:hover {
  background-color: #e0e0e0;
}
</style> 